<template>
	<view class="operating-company-list">
		<!-- <nav-bar title="运营商列表" :showLeftIcon="true" :leftSlot="false"></nav-bar> -->
		<view class="place" id="place">
			<text>当前定位</text>
			<view @click="openSelectCity" class="row-column-center">
				<text>{{positionEvent.cityName}}</text>
				<u-icon name="map-fill" color="#2979ff" size="16"></u-icon>
			</view>
		</view>
		<scroll-view scroll-y="true" :style="{ 'height': scrollHeight + 'px'}"  @scrolltolower="loadMore">
			<view class="content-box">
				<view v-for="item,index in logisticsList" class="item-list" :key="index">
					<view class="title-name row-between">
						<text>{{item.companyName}}</text>
						<text style="color: #2979ff;font-size: 24rpx;" v-if="item.crmNetworkPointsList && item.crmNetworkPointsList.length > 0" @click="toDetail(item)">查看更多</text>
					</view>
					<view class="row-column-center" v-if="!item.crmNetworkPointsList || item.crmNetworkPointsList.length <= 0">
						<text>暂无信息</text>
					</view>
					<view v-for="dom,i in item.crmNetworkPointsList" style="padding: 20rpx 0;border-bottom: 2rpx solid #e6e6e6;">
						<view class="title-point">{{dom.networkPointsName}}</view>
						<view class="point-info row-between">
							<text>联系人：{{dom.businessLeaderName}}</text>
							<!-- <text>联系电话：{{dom.businessLeaderPhone}}</text> -->
							<image src="@/static/images/public/phone.png" mode="" @click="callPhone(dom.businessLeaderPhone)"></image>
						</view>
					</view>
					
				</view>
			</view>
			<view>
				<view class="loading" v-if="!isAllData">
				  正在加载，请稍候
				  <uni-icons type="spinner-cycle" size="16" style="margin-left: 4px;"></uni-icons>
				</view>
				<view class="all-data" v-else>已加载全部数据~</view>
			</view>
		</scroll-view>
		<!-- <liu-choose-address ref="scroll" @change='chooseSuccess' :key="isAddress"></liu-choose-address> -->
		<u-popup :show="isCityPopupShow" :safeAreaInsetBottom="false" @close="isCityPopupShow = false" mode="right">
			<you-index-adress @select="selectCity"></you-index-adress>
		</u-popup>
	</view>
</template>

<script>
	import settleIn from '@/api/settleIn.js'
	import {
		baseIconUrl,
		baseImgUrl
	} from '@/config'
	import {mapState} from 'vuex'
	import { getToken, checkToken } from '@/utils/auth'
	export default {
		name: 'OperatingCompany',
		components: {},
		data() {
			return {
				loadingHeight: '',
				scrollHeight: '',
				pageInfo: {
					pageSize: 10,
					pageNum: 1,
					total: 0
				},
				positionEvent: {},
				logisticsList: [],
				isAllData: false,
				isRequestSuccess: false,
				isCityPopupShow: false
			}
		},
		computed: {
			...mapState('global', {
				allCityComplete: 'allCityComplete'
			})
		},
		async onLoad() {
			let positionEvent = uni.getStorageSync("positionEvent");
			console.log(this.$store.getters.heightData)
			if(positionEvent && positionEvent != "{}") {
				this.positionEvent = JSON.parse(positionEvent)
			} else {
				this.getPosition();
			}
			this.getCompaniesListFn();
		},
		async onShow() {

		},
		mounted() {
			const systemInfo = uni.getSystemInfoSync();
			this.scrollHeight = systemInfo.windowHeight;
			const query = uni.createSelectorQuery().in(this);
			query.select('#place').boundingClientRect(data => {
				if (data) {
					this.$nextTick(() => {
						this.scrollHeight = this.scrollHeight - data.height;
					})
				}
			}).exec();
		},
		methods: {
			loadMore() {
				console.log("加载更多")
				let {pageNum, pageSize, total} = this.pageInfo;
				if(pageNum  >= total / pageSize) {
					this.isAllData = true;
					return;
				}
				this.$set(this.pageInfo, 'pageNum', pageNum+1);
				this.getCompaniesListFn();
				
			},
			callPhone(phone) {
				if(!checkToken()) return;
				uni.makePhoneCall({
					phoneNumber: phone,
					success: () => {
					  
					},
					fail: (err) => {
					}
				});
			},
			onRefresh() {
				uni.stopPullDownRefresh();
			},
			getPosition() {
				uni.getLocation({
					type: 'gcj02',
					success: (res) => {
						console.log(res)
						this.$set(this.positionEvent, 'cityName', res.city);
						let index = this.allCityComplete.findIndex(ele => ele.cityName == res.city);
						if(index > -1) {
							this.$set(this.positionEvent, 'cityCode', this.allCityComplete[index].id);
						}
						uni.setStorageSync('positionEvent', JSON.stringify(this.positionEvent))
						this.getCompaniesListFn();
					},
					fail:(err) => {
						console.log(err)
						this.$set(this.positionEvent, 'cityCode', '420100');
						this.$set(this.positionEvent, 'cityName', '武汉市');
						this.getCompaniesListFn();
					}
				});
			},
			async getCompaniesListFn() {
				this.isAllData = false;
				let res = await settleIn.getCompanypointsList({
					city: this.positionEvent.cityCode,
					pageSize: this.pageInfo.pageSize,
					pageNum: this.pageInfo.pageNum
				});
				this.logisticsList.push(...res.rows);
				this.$set(this.pageInfo, "total", res.total);
				let {pageNum, pageSize, total} = this.pageInfo;
				if(pageNum  >= total / pageSize) {
					this.isAllData = true;
					return;
				}
				console.log(this.logisticsList)
			},
			openSelectCity() {
				// this.$refs.scroll.open();
				this.isCityPopupShow = true;
			},
			chooseSuccess(e) {
				console.log(e);
				if(e.value.length > 1) {
					this.pageInfo = {
						pageSize: 10,
						pageNum: 1,
						total: 0
					}
					this.$set(this.positionEvent, 'cityCode', e.value[1].value);
					this.$set(this.positionEvent, 'cityName', e.value[1].label);
					this.getCompaniesListFn();
				}
				
			},
			selectCity(e) {
				this.$set(this.positionEvent, 'cityCode', e.id);
				this.$set(this.positionEvent, 'cityName', e.cityName);
				this.logisticsList = [];
				this.getCompaniesListFn();
				this.isCityPopupShow = false;
			},
			toDetail(item) {
				uni.navigateTo({
					url: '/subPages/settleIn/operationNetworkList?companyId=' + item.id + '&companyName=' + item.companyName
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.loading,
	  .all-data {
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    color: #999;
		padding: 15rpx 0;
	  }
	.operating-company-list {
		background: #ffffff;
		height: 100%;
		.place {
			display: flex;
			justify-content: space-between;
			padding: 20rpx 30rpx;
			// border-bottom: 2rpx solid #00000010;
			font-family: "PingFang SC";
			font-size: 28rpx;
			font-style: normal;
			font-weight: 500;
			line-height: 40rpx;
			color: #1a1a1a;
		}

		.content-box {
			padding: 30rpx;
			background: #ffffff;
			font-size: 28rpx;
			color: #1a1a1a;
			font-family: "PingFang SC";
			.item-list {
				font-family: "PingFang SC";
				margin-bottom: 40rpx;
				&:last-of-type {
					margin-bottom: 0;
				}
				.title-name {
					font-size: 30rpx;
					color: #1a1a1a;
					font-weight: bold;
				}
				.title-point {
					font-size: 28rpx;
					color: #1a1a1a;
					margin-bottom: 20rpx;
				}
				.point-info {
					font-size: 24rpx;
					color: #999;
					image {
						width: 40rpx;
						height: 40rpx;
					}
				}
			}
		}
	}
</style>